<template>
  <div>
    <div class="mvlists" ref="mvlists">
      <ul>
        <li v-for="(item, index) in mvList" :key="index">
          <div
            class="imgs"
            :style="{ 'background-image': 'url(' + item.cover + ')' }"
            @click="getMvUrlFn(index, item.id,item.name)"
            v-show="playNum != index"
          >
            <span class="iconfont icon-bofang"></span>
          </div>
          <div class="imgs" v-show="playNum == index" @click="mvPlayend">
            <video
              :src="item.mvurl"
              :ref="'video' + index"
              controls
              @loadeddata="loadeddataFun"
            ></video>
          </div>
          <div class="more">
            <ul>
              <li class="guanzhu">
                <div
                  class="img"
                  :style="{ 'background-image': 'url(' + item.cover + ')' }"
                ></div>
                <!-- <img :src="item.cover " alt="" /> -->
                <div @click.stop="focusOn(index)">
                  <span
                    :class="['iconfont', 'icon-guanzhu', { record: index1 == index }]"
                  ></span>
                  <span>{{ item.word }}</span>
                </div>
              </li>
              <li class="dianzhan" @click.stop="getreSourceLikeFn(index)">
                <span
                  :class="['iconfont', 'icon-dianzan', { record: index2 ==index}]"
                ></span>
                <span>{{ num[index] }}</span>
              </li>
              <li class="pinlun" @click="getCommentMvFn(item.id,item.name)">
                <span class="iconfont icon-pinglun"></span>
                <span>评论</span>
              </li>
            </ul>
          </div>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMvList, getMvUrl, getreDetailInfo } from "../api/mv.js";
// import { getMvList, getMvUrl, getreSourceLike } from "../api/mv.js";
export default {
  data() {
    return {
      mvList: [],
      playNum: null, //这是让点击播放和切换隐藏
      offset: 0, //偏移数量 , 用于分页
      flag: true,
      mvId: null,
      num: [],
      t: 1,
      type: 1,
      flag1: false,
      flag2: false,
      index1:null,
      index2:null,
      // word: "关注",
    };
  },
  //   加载第三方数据
  created() {
    getMvList({ limit: 5, offset: this.offset }).then((data) => {
      this.mvList = data.data;
      // this.mvList.word = "关注";
      this.mvList.forEach((item) => {
        item.word = "关注";
        this.getreDetailInfoFn(item.id);
      });
      // console.log("mvid", this.mvList);
    });
  },

  methods: {
    getreDetailInfoFn(id) {
      getreDetailInfo({ mvid: id }).then((info) => {
        // console.log("mv12", info);
        this.num.push(info.likedCount);
      });
    },
    // 点击评论
    getCommentMvFn(id,items) {
      // /comment/mv?id=5436712
      this.$router.push({path:"/comments",query:{name:items,id:id}})
    },
    // 点击关注
    focusOn(index) {
      this.flag1 =  !this.flag1;
      if (this.flag1) {
        this.mvList[index].word = "已关注";
        this.index1 = index;

      } else {
        this.mvList[index].word  = "关注";
        this.index1 = null;
      }
    },
    // 点赞功能
    getreSourceLikeFn(index) {
      this.flag2 = !this.flag2;
      if (this.flag2) {
        this.num[index] += 1;
        this.index2 = index;
      } else {
        this.num[index] -= 1;
        this.index2 = null;
      }
      //   // /resource/like?t=1&type=1&id=5436712
      //   // let t=1;
      //   console.log(id);
      // getreSourceLike({ t: 1, type: 1, id: id }).then((data) => {
      //   console.log("点赞",data);
      // });
    },

    getMvUrlFn(index, id,) {
      // console.log("视频id",id);
      // 这是判断点击播放与关闭
      if (this.playNum || this.playNum == 0) {
        // console.log("playNum", this.$refs["video" + this.playNum][0]);
        this.$refs["video" + this.playNum][0].pause();
        //   this.$refs["video" + this.playNum][0].pause();
      }
      this.playNum = index;
      getMvUrl({ id }).then((data) => {
        console.log("视频data", data);
        // 数据没有通过视图
        this.$set(this.mvList[index], "mvurl", data.data.url);
      });
    },
    loadeddataFun(event) {
      event.target.play();
    },
    mvPlayend() {
      this.$refs["video" + this.playNum][0].pause();
      this.playNum = null;
    },
    // 添加数据
    addData() {
      // 防抖
      if (this.flag) {
        this.flag = false;
        //每次添加五条数据
        this.offset += 5;
        getMvList({ limit: 5, offset: this.offset }).then((data) => {
          this.mvList = this.mvList.concat(data.data);
          this.flag = true;
          data.data.forEach((item) => {
            this.getreDetailInfoFn(item.id);
            item.word = "关注";
          });
        });
      }
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动条偏移量
      // let lis = this.$refs.mvlists.getElementsByTagName("li");
      // let num = lis.length;
      // let liHeight = lis[num - 8].offsetTop;
      let liHeight = 900;
      // console.log( "高度",liHeight);
      // console.log( "滚动",scrollTop);
      if (scrollTop > liHeight) {
        //触发添加数据
        this.addData();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
.mvlists {
  width: 100%;
  li {
    .imgs {
      width: 100%;
      height: 211px;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      span {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: #fff;
        font-size: 24px;
      }
      video {
        // min-width: 320px;
        // max-width: 750px;

        height: 211px;
        margin: 0 auto;
        display: block;
      }
    }
    p {
      padding: 10px;
      color: #333;
      font-size: 16px;
    }
  }
}
.more {
  height: 50px;
  background: #eee;
  padding: 0 10px;
  ul {
    height: 50px;
    display: flex;
    font-size: 16px;
    align-items: center;
    justify-content: space-between;
    .guanzhu {
      display: flex;
      align-items: center;
      flex: 0 0 40%;
      // background: rgba(0, 0, 0, .1);
      border-radius: 20px;
      .img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background: pink;
        vertical-align: middle;
        background-size: cover;
        background-repeat: no-repeat;
      }
      div {
        margin-left: 12px;
      }
    }
    // .dianzhan{
    //   span{

    //   }
    // }
    .iconfont {
      font-size: 20px;
    }
    .record {
      color: #d4473c;
    }
  }
}
</style>